package myJs.projectCps.permuteResult

import cats.effect.SyncIO
import com.softwaremill.quicklens._
import myJs.cps._
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.React.Fragment
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.myPkg.Hooks._

/** Created by yz on 3/11/2020
  */
object ColorCp {

  val plotO = Cp.plotO

  case class Props(
      basicData: plotO.ColorData,
      basicDataChange: (plotO.ColorData => plotO.ColorData) => SyncIO[Unit]
  ) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    object FTool {

      def strChange(f: PathLazyModify[plotO.ColorData, String]) = (v: String) => {
        props.basicDataChange {
          f.setTo(v)
        }
      }

    }

    val basicData = props.basicData

    Fragment(
      MiniColorInlineCp
        .Props(
          label = span("R",sup("2"),"Y"),
          value = basicData.r2y,
          onChange = FTool.strChange(modifyLens[Cp.plotO.ColorData](_.r2y)),
          name = s"r2y",
          labelWidth = 4,
          inputWidth = 8
        )
        .render,
      MiniColorInlineCp
        .Props(
          label = span("Q",sup("2"),"Y"),
          value = basicData.q2y,
          onChange = FTool.strChange(modifyLens[Cp.plotO.ColorData](_.q2y)),
          name = "q2y",
          labelWidth = 4,
          inputWidth = 8
        )
        .render,
    )

  }

}
